<template>
    <div class="diy-home">
        <div class="flex flex-1 justify-between gap-4 overflow-hidden overflow-x-auto">

            <tools @select="handleToolbox" />

            <div class="preview-window">
                <el-scrollbar>
                    <Draggable v-model="diyData.items" :item-key="'selected'" animation="300">
                        <template #item="{ element, index }">
                            <div>
                                <!-- 头部组件 -->
                                <HoverClose
                                    v-if="element.type === 'header'"
                                    :key="index"
                                    custom-class="!top-1 !left-1"
                                    class="item-component"
                                    :class="{ active: index === activeIndex }"
                                    @close="deleteComponent(index)"
                                >
                                    <header-widget
                                        :diy-data="diyData.items[index]"
                                        @click.stop="changeComponent(index)"
                                    />
                                </HoverClose>
                                <!-- 入口组件 -->
                                <HoverClose
                                    v-if="element.type === 'entrant'"
                                    :key="index"
                                    custom-class="!top-1 !left-1"
                                    class="item-component"
                                    :class="{ active: index === activeIndex }"
                                    @close="deleteComponent(index)"
                                >
                                    <entrant-widget
                                        :diy-data="diyData.items[index]"
                                        @click.stop="changeComponent(index)"
                                    />
                                </HoverClose>
                                <!-- 能力组件 -->
                                <HoverClose
                                    v-if="element.type === 'faculty'"
                                    :key="index"
                                    custom-class="!top-1 !left-1"
                                    class="item-component"
                                    :class="{ active: index === activeIndex }"
                                    @close="deleteComponent(index)"
                                >
                                    <faculty-widget
                                        :diy-data="diyData.items[index]"
                                        @click.stop="changeComponent(index)"
                                    />
                                </HoverClose>
                                <!-- 优势组件 -->
                                <HoverClose
                                    v-if="element.type === 'feature'"
                                    :key="index"
                                    custom-class="!top-1 !left-1"
                                    class="item-component"
                                    :class="{ active: index === activeIndex }"
                                    @close="deleteComponent(index)"
                                >
                                    <feature-widget
                                        :diy-data="diyData.items[index]"
                                        @click.stop="changeComponent(index)"
                                    />
                                </HoverClose>
                                <!-- 概述组件 -->
                                <HoverClose
                                    v-if="element.type === 'profile'"
                                    :key="index"
                                    custom-class="!top-1 !left-1"
                                    class="item-component"
                                    :class="{ active: index === activeIndex }"
                                    @close="deleteComponent(index)"
                                >
                                    <profile-widget
                                        :diy-data="diyData.items[index]"
                                        @click.stop="changeComponent(index)"
                                    />
                                </HoverClose>
                                <!-- 问题组件 -->
                                <HoverClose
                                    v-if="element.type === 'problem'"
                                    :key="index"
                                    custom-class="!top-1 !left-1"
                                    class="item-component"
                                    :class="{ active: index === activeIndex }"
                                    @close="deleteComponent(index)"
                                >
                                    <problem-widget
                                        :diy-data="diyData.items[index]"
                                        @click.stop="changeComponent(index)"
                                    />
                                </HoverClose>
                                <!-- 图片组件 -->
                                <HoverClose
                                    v-if="element.type === 'images'"
                                    :key="index"
                                    custom-class="!top-1 !left-1"
                                    class="item-component"
                                    :class="{ active: index === activeIndex }"
                                    @close="deleteComponent(index)"
                                >
                                    <images-widget
                                        :diy-data="diyData.items[index]"
                                        @click.stop="changeComponent(index)"
                                    />
                                </HoverClose>
                                <!-- 页脚组件 -->
                                <HoverClose
                                    v-if="element.type === 'footer'"
                                    :key="index"
                                    custom-class="!top-1 !left-1"
                                    class="item-component"
                                    :class="{ active: index === activeIndex }"
                                    @close="deleteComponent(index)"
                                >
                                    <footer-widget
                                        :diy-data="diyData.items[index]"
                                        @click.stop="changeComponent(index)"
                                    />
                                </HoverClose>
                            </div>
                        </template>
                    </Draggable>
                </el-scrollbar>
            </div>

            <div v-if="activeEditor" class="editor-window">
                <el-scrollbar>
                    <component
                        v-model="diyData.items[activeIndex]"
                        :is="componentMap[activeEditor]"
                    />
                </el-scrollbar>
            </div>
        </div>

        <el-card shadow="never" class="!border-none mt-4 text-center">
            <el-button
                v-perms="['diy:save']"
                type="primary"
                @click="handleSubmit"
            >保存装修</el-button>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import Draggable from 'vuedraggable'
import feedback from '@/utils/feedback.ts'
import diyApi from '@/api/diy.ts'
import tools from './tools.vue'
import EntrantWidget from './_pages/entrant.vue'
import FacultyWidget from './_pages/faculty.vue'
import FeatureWidget from './_pages/feature.vue'
import ProfileWidget from './_pages/profile.vue'
import ProblemWidget from './_pages/problem.vue'
import ImagesWidget from './_pages/images.vue'
import FooterWidget from './_pages/footer.vue'
import HeaderWidget from './_pages/header.vue'
import EditorEntrant from './_editor/editor-entrant.vue'
import EditorFaculty from './_editor/editor-faculty.vue'
import EditorFeature from './_editor/editor-feature.vue'
import EditorProfile from './_editor/editor-profile.vue'
import EditorProblem from './_editor/editor-problem.vue'
import EditorImages from './_editor/editor-images.vue'
import EditorFooter from './_editor/editor-footer.vue'
import EditorHeader from './_editor/editor-header.vue'

// 提交状态
const loading = ref<boolean>(false)

// 编辑组件
const activeEditor = ref<string>('header')
const componentMap = shallowRef<any>({
    'footer': EditorFooter,
    'header': EditorHeader,
    'entrant': EditorEntrant,
    'faculty': EditorFaculty,
    'feature': EditorFeature,
    'profile': EditorProfile,
    'problem': EditorProblem,
    'images': EditorImages
})

// 装修组件
const activeIndex = ref<number>(0)
const diyData = ref<any>({
    items: []
})

/**
 * 查询装修数据
 */
const queryDiyData = async () => {
    // 查询数据
    const result = await diyApi.detail(100)
    // 设置数据
    diyData.value = result.data
}

/**
 * 切换激活组件
 *
 * @param {number} index
 * @author zero
 */
const changeComponent = (index: number) => {
    activeIndex.value = index
    if (index === -1) {
        activeEditor.value = 'header'
    } else {
        activeEditor.value = diyData.value.items[index].type
    }
}

/**
 * 删除装修组件
 *
 * @param {number} index
 * @author zero
 */
const deleteComponent = (index: number) => {
    feedback.confirm('确定要删除当前组件吗?')
        .then(() => {
            diyData.value.items.splice(index, 1)
        }).catch(() => {})
}

/**
 * 处理增加组件
 *
 * @param {any} data
 * @author zero
 */
const handleToolbox = (data: any) => {
    diyData.value.items.push(data)
}

/**
 * 提交装修保存
 *
 * @author zero
 */
const handleSubmit = async () => {
    feedback.confirm('您确定要保存当前装修吗?')
        .then(async () => {
            loading.value = true
            await diyApi.save({
                scene: 100,
                data: diyData.value
            }).finally(() => {
                loading.value = false
            })
            await queryDiyData()
            feedback.msgSuccess('保存成功')
        }).catch()
}

onMounted(async () => {
    await queryDiyData()
})
</script>

<style scoped lang="scss">
.diy-home {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 117px);

    .preview-window {
        flex: 1;
        min-width: 600px;
        max-width: 1200px;
        overflow: hidden;
        border: 1px dashed var(--el-border-color-light);
        background: linear-gradient(#dee7fb, #e2e6fb, #f2f5f9, #f5f7f9);
        .item-component {
            border: 1px solid transparent;
            border-top: 0;
            border-bottom: 0;
            cursor: pointer;
        }
        .active {
            border: 1px dashed var(--el-color-primary);
        }
    }

    .editor-window {
        width: 400px;
        min-width: 320px;
        flex-shrink: 0;
        background-color: var(--color-white);
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid var(--el-border-color-lighter);
        display: flex;
        flex-direction: column;
    }
}
</style>
